// 知识库   药品 和 病症

import { useRequest, useSetState } from 'ahooks';
import React, { useEffect, useState } from 'react'
import { useSearchParams } from 'react-router-dom'
import { getDiseaseContent, getDiseaseTitle, getDrugContent, getDrugTitle } from '../../../api/home';
import { WdHeader } from '../../../components';
import { Tabs, Sidebar, List } from 'react-vant'
import style from './index.module.scss'

export interface DiseaseTitleState {
  departmentName: string
  id: number
  pic: string
  rank: number
}

export interface DiseaseContentState {
  departmentId: number
  id: number
  name: string
}

export interface DrugTitleState {
  id: number
  name: string
  rank: number
}

interface DrugContentState {
  drugsCategoryId: number
  id: number
  name: string
  picture: string
}

const Index: React.FC = () => {
  const [searchParams] = useSearchParams()
  // 类型 type 1 病症   2 药品
  const type = searchParams.get('type') || "1";
  // 病症id
  const [departmentId, setDepartmentId] = useState<number>(0);

  // 病症标题
  const { data: diseaseTitle = [] } = useRequest(async () => {
    const resp = await getDiseaseTitle();
    setDepartmentId(resp.data.result[0].id);
    return resp.data.result as DiseaseTitleState[]
  })

  // 病症内容
  const { data: diseaseData = [], run } = useRequest(async () => {
    const resp = await getDiseaseContent(departmentId);
    return resp.data.result as DiseaseContentState[]
  }, { manual: true })


  useEffect(() => run(), [departmentId])
  /****************************************************************/
  // 药品列表参数
  const [drugParams, setDrugParams] = useSetState({
    drugsCategoryId: 0, page: 1, count: 20
  })
  // 药品标题
  const { data: drugTitle = [] } = useRequest(async () => {
    const resp = await getDrugTitle();
    setDrugParams({ drugsCategoryId: resp.data.result[0].id })
    return resp.data.result as DrugTitleState[]
  })

  // 药品内容
  const { data: drugData = [], run: run1 } = useRequest(async () => {
    const resp = await getDrugContent(drugParams);
    // 累加 或者 重置
    // 页码为 1  => 重置
    // 页码非 1  => 累加
    if (drugParams.page === 1) {
      return resp.data.result as DrugContentState[]
    } else {
      return [...drugData, ...resp.data.result]
    }
  }, { manual: true })

  console.log(drugData)

  useEffect(() => {
    if (drugParams.drugsCategoryId !== 0) run1();
  }, [drugParams])

  return (
    <div>
      <WdHeader mode="black"></WdHeader>
      {/* 顶部 tab */}
      <Tabs defaultActive={type}>
        <Tabs.TabPane title="常见病症" key="1" name="1">
          <Sidebar>
            {
              diseaseTitle.map(v => {
                return <Sidebar.Item key={v.id} title={v.departmentName}
                  onClick={() => setDepartmentId(v.id)}>
                  <ul className={style.right_scroll}>
                    {
                      diseaseData.map(v => {
                        return <li key={v.id}>{v.name}</li>
                      })
                    }
                  </ul>
                </Sidebar.Item>
              })
            }
          </Sidebar>
        </Tabs.TabPane>
        <Tabs.TabPane title="常用药品" key="2" name="2">
          <Sidebar>
            {
              drugTitle.map(v => {
                return <Sidebar.Item key={v.id} title={v.name} onClick={() => setDrugParams({ drugsCategoryId: v.id, page: 1 })}>
                  <div className={style.right_scroll}>
                    {/* <List onLoad={async () => setDrugParams({ page: drugParams.page + 1 })} finished={false}> */}
                    {
                      drugData.map(v => {
                        return <dl key={v.id}>
                          <dd>{v.name}</dd>
                          <dt>
                            <img src={v.picture} alt="" />
                          </dt>
                        </dl>
                      })
                    }
                    {/* </List> */}
                  </div>
                </Sidebar.Item>
              })
            }
          </Sidebar>
        </Tabs.TabPane>
      </Tabs>
    </div>
  )
}
export default Index